<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <label for="protocal">
        <input type="checkbox" id="protocal" v-model="isAgree">同意
    </label>
    <h2>isAgree的值{{isAgree}}</h2>
    <button :disabled="!isAgree">下一步</button>
    <br>
<!--    <label for="basketball">-->
<!--        <input id="basketball" type="checkbox" value="篮球" v-model="balls">篮球-->
<!--    </label>-->
<!--    <label for="football">-->
<!--        <input id="football" type="checkbox" value="足" v-model="balls">足球-->
<!--    </label>-->
    <label v-for="item in balls" :for="item">
        <input type="checkbox" :id="item" :value="item" v-model="balls">{{item}}
    </label>
    <h2>balls的值{{balls}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const aaa = new Vue({
        el: "#app",
        data: {
            message: "hello,guys",
            isAgree: false,
            balls:['篮球', '足球', '乒乓球']
        }
    })
</script>
</body>
</html>